<template>
  <div>
    <div class="div_title nav-b">
      <ul class="nav">
        <li><p class="line"></p></li>
        <li :class="{ 'nav-click': navName == 'index'}" class="text" @click="goToList('/index')">首页</li>
        <li><p class="line"></p></li>
        <li :class="{ 'nav-click': navName == 'xf'}" class="text" @click="goToList('/list?name=xf')">宪法</li>
        <li><p class="line"></p></li>
        <li :class="{ 'nav-click': navName == 'fl'}" class="text" @click="goToList('/list?name=fl')">法律</li>
        <li><p class="line"></p></li>
        <li :class="{ 'nav-click': navName == 'xzfg'}" class="text" @click="goToList('/list?name=xzfg')">行政法规</li>
        <li><p class="line"></p></li>
        <li :class="{ 'nav-click': navName == 'dfxfg'}" class="text" @click="goToList('/list?name=dfxfg')">地方性法规</li>
        <li></li>
        <li><p class="line"></p></li>
        <li :class="{ 'nav-click': navName == 'sfjs'}" class="text" @click="goToList('/list?name=sfjs')">司法解释</li>
        <li><p class="line"></p></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 指定初始值
      navName: 'xf'
    }
  },
  methods: {
    changeNav (name) {
      // 判断是否是首页
      if (name === undefined) {
        this.navName = 'index'
        return
      }
      this.navName = name
    },
    goToList (url) {
      this.$router.push(url)
    }
  }
}
</script>
<style>

.nav-b {
  background: url(../assets/nav-b.png);
  width: 100%;
  height: 62px
}

.nav {
  width: 1200px;
  margin: 0px auto;
}

.nav .nav-click, .nav .text:hover {
  background: url(../assets/nav-b1.png);
  height: 62px;
}

.nav .text {
  font-size: 18px;
  color: #fff;
  padding: 0 65px;
  font-weight: 600;
  cursor: pointer
}

.nav li {
  float: left
}

.nav .line {
  height: 62px;
  background: #4e0200;
  width: 2px;
  border-right: 1px solid #890300
}

.nav .text {
  line-height: 60px
}

</style>
